<template>
    <div class="waresList">
        <a-table :dataSource="wares" 
            rowKey="id" :columns="columns" 
            :pagination="false" 
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
            :scroll="{ y: 240 }"
        >
            <template #headerCell="{ column }">
                <template v-if="column.key === 'name'">
                    <span>
                        <smile-outlined />
                        Name
                    </span>
                </template>
            </template>

            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'price'">
                    <span :class="{'wageUp': record.price > 10000, 'wageDown': record.price <= 3000 }">{{record.price}}</span>
                    <arrow-up-outlined class="wageUp ml-5" v-if="record.price > 10000" />
                    <arrow-down-outlined class="wageDown ml-5" v-if="record.price <= 3000" />
                </template>
                <template v-else-if="column.key === 'name'">
                    <a>{{record.name}}</a>
                </template>
                <template v-else-if="column.key === 'static'">
                    <span>
                        <a-tag 
                            v-for="item in record.static"
                            :key="item"
                            :color="item === '缺货' ? 'volcano' : item === '待补货' ? 'geekblue' : 'green'"
                        >
                            {{ item }}
                        </a-tag>
                    </span>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { waresList } from '@/api/home/index.js'
import { reactive } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'

export default defineComponent({
    setup() {
        const columns = [{
            title: '商品月销售量',
            key: 'all',
            width: 150
        }, {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: '商品月销售额',
            dataIndex: 'price',
            key: 'price'
        }, {
            title: '仓库货量',
            dataIndex: 'static',
            key: 'static'
        }]
        onMounted(() => {
            getWaresList()
        })

        const wares = reactive([])


        function getWaresList() {
            waresList().then(res => {
                res.data.result.sort((a, b) => {
                    return b.price - a.price
                })
                res.data.result.map(el => {
                    wares.push(el)
                })
            })
        }    

        return {
            wares,
            columns
        }
    },
})
</script>

<style lang="scss" scoped>
.wageUp {
    color: #F4516C;
}
.wageDown {
    color: #6FB8BB;
}
.waresList :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
